<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    on-ok="handleOk"
    switch-fullscreen
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    cancel-text="关闭"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <publish-form
      ref="realForm"
      :article-title="articleTitle"
      :article-content-md="articleContentMd"
      :article-content-html="articleContentHtml"
      :target-path="targetPath"
      :disabled="disableSubmit"
      @ok="submitCallback"
      @errorPush="errorPush"
    />
    <div style="text-align: center;color: #f5222d;" v-if="articleData.publishState === '2'">
      本篇文章为定时发布，发布时间： {{ articleData.publishTime }}
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel" :loading="loadingOk">
        取消
      </a-button>
      <a-button
        @click="handleSaveDraft"
        v-if="targetType === '0' || articleData.publishState === '3'"
        :loading="loadingOk"
      >
        存为草稿
      </a-button>
      <a-button @click="handleQuartzPush" v-if="targetType === '0' || articleData.publishState === '2'"
                :loading="loadingOk"
      >
        定时发布
      </a-button>
      <a-button type="primary" @click="publishNow"
                v-if="articleData.publishState === '2' || articleData.publishState === '3'" :loading="loadingOk"
      >
        立即发布
      </a-button>
      <a-button type="primary" @click="handleOk" :loading="loadingOk"
                v-if="articleData.publishState === '1' || targetType === '0'"
      >
        发布文章
      </a-button>
    </template>

    <a-modal
      title="定时发布"
      :visible="quartzVisible"
      on-ok="handleOk"
      switch-fullscreen
      :ok-button-props="{ props: { disabled: disableSubmit } }"
      cancel-text="关闭"
      @ok="handleQuartzPushOk"
      @cancel="handleQuartzPushCancel"
    >
      <p>请选择当前时间后 1天 至 7天 进行定时发布</p>
      <el-date-picker
        v-model="quartzPushDate"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        placeholder="选择日期"
      >
      </el-date-picker>
      <el-time-select
        value-format="mm:ss"
        style="margin-left: 20px"
        v-model="quartzPushTime"
        :picker-options="{
          start: '00:00',
          step: '00:15',
          end: '23:45'
        }"
        placeholder="选择时间"
      >
      </el-time-select>
    </a-modal>
  </a-modal>
</template>

<script>
import PublishForm from './PublishForm'
import moment from 'moment'

export default {
  name: 'PublishModal',
  components: {
    PublishForm
  },
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          let _now = Date.now()
          let seven = 7 * 24 * 60 * 60 * 1000
          let sevenDays = _now + seven
          return time.getTime() < _now || time.getTime() > sevenDays
        }
      },
      title: '发布文章',
      width: 900,
      visible: false,
      disableSubmit: false,
      articleTitle: '',
      articleContentMd: '',
      articleContentHtml: '',
      targetType: '',
      targetPath: '',
      quartzVisible: false,
      quartzPushDate: '',
      quartzPushTime: '',
      showBtnFlag: false,
      loadingOk: false,
      articleData: {}
    }
  },
  methods: {
    add(articleData) {
      this.articleData = articleData
      if (this.articleData.publishState === '2') {
        this.title = '发布文章：本篇文章为定时发布，发布时间：' + articleData.publishTime
        this.quartzPushDate = articleData.publishTime
        this.quartzPushTime = moment(articleData.publishTime).format('HH:mm')
      }
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.add(articleData)
      })
    },
    edit(record) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.realForm.edit(record)
      })
    },
    handleOk() {
      this.loadingOk = true
      this.$refs.realForm.publishState = '1'
      this.$refs.realForm.submitForm()
    },
    publishNow() {
      this.loadingOk = true
      this.$refs.realForm.publishState = '1'
      this.$refs.realForm.publishNowFlag = true
      this.$refs.realForm.submitForm()
    },
    handleCancel() {
      this.loadingOk = false
      this.visible = false
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    errorPush() {
      this.loadingOk = false
    },
    handleQuartzPush() {
      this.quartzVisible = true
    },
    // 定时发布
    handleQuartzPushOk() {
      this.loadingOk = true
      this.$refs.realForm.publishState = '2'
      this.$refs.realForm.quartzPushDate = this.quartzPushDate
      this.$refs.realForm.quartzPushTime = this.quartzPushTime
      this.$refs.realForm.submitForm()
    },
    handleQuartzPushCancel() {
      this.quartzVisible = false
      this.loadingOk = false
    },
    // 存为草稿
    handleSaveDraft() {
      this.loadingOk = true
      this.$refs.realForm.publishState = '3'
      this.$refs.realForm.submitForm()
    }
  }
}
</script>
